// 注册全局自定义指令
// Vue2:  Vue.directive(指令名,生命周期)
// Vue3:  app.directive(指令名,生命周期)
//        app====createApp(App)
// 一般使用use方式进行自定义指令注册
// Vue.use=====app.use()
/*
   app.use({
    install(app,options){
      app.directive(指令名,生命周期)  
    }
   },options实参)

  单独抽离 封装
   export default  {
    install(app,options){
      app.directive(指令名,生命周期)  
    }
   }
   在main.ts导入
   import xxx from '..'
   app.use(xxx)

*/
import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
const obj: {
  [e: string]: any
} = {
  test: {
    mounted (dom: HTMLDivElement, obj: { value: string }) {
      dom.innerText = obj.value
      console.log(dom, obj)
    }
  },
  lazyImg: {
    // 封装自定义指令解决图片懒加载问题
    //   图片所在dom进入可视区域后加载（赋值src）
    mounted (dom: HTMLImageElement, obj: { value: string }) {
      const { stop } = useIntersectionObserver(dom, ([{ isIntersecting }]) => {
        if (isIntersecting) {
          dom.src = obj.value
          dom.onerror = () => {
            dom.src = defaultImg
          }
          stop()
        }
      })
    }
  }
}

export default {
  install (app: App) {
    // app.directive('test', {
    //   mounted (dom, obj) {
    //     dom.innerText = obj.value
    //     console.log(dom, obj)
    //   }
    // })
    // app.directive('lazyImg', {})
    Object.keys(obj).forEach(item => {
      app.directive(item, obj[item])
    })
  }
}
